vue中v

2022-11-29 13:01| 来源: 网络整理| 查看: 265

vue动态绑定class练习。

：class=“{ ‘类名1'：条件表达式，‘类名2'：条件表达式… }”

export default { data() { return { list: [1, 2, 3, 4], clickIndex: -1 }; }, methods: {} }; .item { display: inline-block; width: 100px; height: 100px; cursor: pointer; border: 1px solid black; } .item:hover { background: gray; } .item.click { background: red; }

补充：vue之v-for中给每个item动态绑定class，动态添加元素，动态删除某个元素的实现

主要解决了在v-for时，如何给每个item添加动态的样式，即是说，鼠标滑动到某一项时，可以单独改变某一项的样式，同时添加按钮等操作。以及删除某一项的操作。

{{ itemIndex+1 }} :{{ item.title }} 删除({{itemIndex+1}}) export default { name: 'HelloWorld', data () { return { test: [ { id: 1, title: 'title first' }, { id: 2, title: 'title second' }, { id: 3, title: 'title third' } ], isActive: '' } }, methods: { onMouseEnter(index) { this.isActive = index }, onMouseLeave() { this.isActive = '' }, deleteItem(index) { this.test.splice(index, 1) } }, computed: { } } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { /* display: inline-block; */ margin:10px; } a { color: #42b983; } .defaultClass{ background-color: red; }

总结

以上所述是小编给大家介绍的vue中v-for通过动态绑定class实现触发效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:Vue v-bind动态绑定class实例方法vue动态绑定class的几种常用方式小结vue动态绑定class选中当前列表变色的方法示例快速解决vue动态绑定多个class的官方实例语法无效的问题vue 中动态绑定class 和 style的方法代码详解详解Vue.js动态绑定classvue动态绑定多个class以及带上三元运算或其他条件

【本文地址】

vue中v

vue中v

今日新闻

推荐新闻